<template>
  <div class="dashboard">
    <!-- 数据概览卡片 -->
    <div class="stats-grid">
      <div class="stat-card" v-for="stat in stats" :key="stat.title">
        <div class="stat-icon" :style="{ backgroundColor: stat.color }">
          <i :class="stat.icon"></i>
        </div>
        <div class="stat-content">
          <h3>{{ stat.title }}</h3>
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-trend" :class="{ up: stat.trend > 0, down: stat.trend < 0 }">
            <i :class="stat.trend > 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
            {{ Math.abs(stat.trend) }}% 较上周
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-grid">
      <!-- 销售趋势图 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>销售趋势</h3>
          <div class="chart-actions">
            <select v-model="salesPeriod">
              <option value="week">本周</option>
              <option value="month">本月</option>
              <option value="year">本年</option>
            </select>
          </div>
        </div>
        <div class="chart-content">
          <!-- 这里需要集成图表库，如 ECharts -->
          <div class="chart-placeholder">销售趋势图表</div>
        </div>
      </div>

      <!-- 热销商品排行 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>热销商品</h3>
          <div class="chart-actions">
            <button class="refresh-btn">
              <i class="fas fa-sync-alt"></i>
            </button>
          </div>
        </div>
        <div class="hot-products">
          <div v-for="product in hotProducts" :key="product.id" class="hot-product-item">
            <img :src="product.image" :alt="product.name">
            <div class="product-info">
              <h4>{{ product.name }}</h4>
              <p>销量: {{ product.sales }}</p>
            </div>
            <div class="product-price">¥{{ product.price }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新订单 -->
    <div class="recent-orders">
      <div class="section-header">
        <h3>最新订单</h3>
        <router-link to="/admin/orders" class="view-all">
          查看全部
          <i class="fas fa-arrow-right"></i>
        </router-link>
      </div>
      <div class="order-table">
        <table>
          <thead>
            <tr>
              <th>订单号</th>
              <th>客户</th>
              <th>商品</th>
              <th>金额</th>
              <th>状态</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in recentOrders" :key="order.id">
              <td>{{ order.id }}</td>
              <td>{{ order.customer }}</td>
              <td>{{ order.products }}</td>
              <td>¥{{ order.amount }}</td>
              <td>
                <span class="order-status" :class="order.status">
                  {{ order.statusText }}
                </span>
              </td>
              <td>{{ order.time }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 统计数据
const stats = ref([
  {
    title: '总销售额',
    value: '¥126,560',
    trend: 12.5,
    icon: 'fas fa-yen-sign',
    color: '#1890ff'
  },
  {
    title: '订单数',
    value: '1,280',
    trend: 3.2,
    icon: 'fas fa-shopping-cart',
    color: '#52c41a'
  },
  {
    title: '用户数',
    value: '8,846',
    trend: -2.5,
    icon: 'fas fa-users',
    color: '#722ed1'
  },
  {
    title: '商品数',
    value: '3,450',
    trend: 8.4,
    icon: 'fas fa-box',
    color: '#faad14'
  }
])

// 销售周期
const salesPeriod = ref('week')

// 热销商品
const hotProducts = ref([
  {
    id: 1,
    name: '商品名称1',
    image: 'https://via.placeholder.com/50',
    sales: 328,
    price: 199
  },
  {
    id: 2,
    name: '商品名称2',
    image: 'https://via.placeholder.com/50',
    sales: 286,
    price: 299
  },
  {
    id: 3,
    name: '商品名称3',
    image: 'https://via.placeholder.com/50',
    sales: 265,
    price: 399
  }
])

// 最新订单
const recentOrders = ref([
  {
    id: 'DD20240101001',
    customer: '张三',
    products: '商品1 等2件',
    amount: 299,
    status: 'pending',
    statusText: '待付款',
    time: '2024-01-01 12:00'
  },
  {
    id: 'DD20240101002',
    customer: '李四',
    products: '商品2',
    amount: 199,
    status: 'paid',
    statusText: '已付款',
    time: '2024-01-01 11:30'
  },
  {
    id: 'DD20240101003',
    customer: '王五',
    products: '商品3 等3件',
    amount: 599,
    status: 'shipped',
    statusText: '已发货',
    time: '2024-01-01 11:00'
  }
])
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon i {
  color: white;
  font-size: 24px;
}

.stat-content h3 {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin: 8px 0;
}

.stat-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-trend.up {
  color: #52c41a;
}

.stat-trend.down {
  color: #ff4d4f;
}

.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.chart-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
}

.chart-actions select {
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.refresh-btn {
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 4px;
  color: #999;
}

.hot-products {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hot-product-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.hot-product-item:hover {
  background: #f5f5f5;
}

.hot-product-item img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  margin-right: 12px;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  margin: 0;
  font-size: 14px;
}

.product-info p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #666;
}

.product-price {
  font-weight: bold;
  color: #ff4d4f;
}

.recent-orders {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
}

.view-all {
  color: #1890ff;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

th {
  font-weight: 500;
  color: #666;
  background: #fafafa;
}

.order-status {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.order-status.pending {
  background: #fff7e6;
  color: #faad14;
}

.order-status.paid {
  background: #f6ffed;
  color: #52c41a;
}

.order-status.shipped {
  background: #e6f7ff;
  color: #1890ff;
}
</style> 